<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://www.zkingsoft.com" prefix="matrix"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 本框架基本脚本和样式 -->
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/MBase.js"></script>
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<!-- 搜索框部分start -->
		<matrix:btn value="DistributionProduct:search">
			<div class="row">
				<div class="col-sm-12">
					<form class="form-inline" id="serchform">
						<div class="form-group mr-20">
							<label for="proName">产品名称</label> <input placeholder="请输入名称关键字"
								name="proName" type="text" class="form-control"
								style="margin-left: 5px">
						</div>
						<div class="form-group mr-20">
							<label for="proState">上架状态</label> <select id="proState"
								name="proState" class="form-control">
								<option value="" selected="selected">----全部----</option>
								<option value="1">已上架</option>
								<option value="2">未上架</option>
							</select>
						</div>
						<div class="form-group mr-20">
							<label for="proState">产品类别</label> <select
								class="select2 form-control " name="proType" id="proType"
								style="width: 120px; text-align: center">
							</select>
						</div>
						<div class="form-group mr-20" style="margin-left: 60px;">
							<button onclick="myGrid.serchData()" type="button"
								class="btn btn-info btn-sm">
								<i class="fa fa-search "></i> 搜索
							</button>
							<button onclick="MForm.reset('#serchform');" type="button"
								class="btn btn-info btn-sm">
								<i class="fa fa-refresh "></i> 重置
							</button>
						</div>
					</form>
				</div>
			</div>
		</matrix:btn>
		<!-- 搜索框部分en -->
		<div class="ibox-content radius-5 mt-5 mpanel">

			<div class="row">
				<div class="col-sm-12">
					<div class="option-bar">
						<matrix:btn value="DistributionProduct:dels">
							<button onclick="myGrid.delItems('proId')" type="button"
								class="btn btn-danger btn-sm">
								<i class="fa fa-trash"></i>批量删除
							</button>
						</matrix:btn>
						<matrix:btn value="DistributionProduct:add">
							<button onclick="openAdd()" type="button"
								class="btn btn-success btn-sm">
								<i class="fa fa-plus"></i> 新增
							</button>
						</matrix:btn>
					</div>
					<table id="mgrid">
						<thead>
							<tr>
								<th data-checkbox="true"></th>
								<th data-formatter="MGrid.indexfn" data-align="center"
									data-width="30px">序号</th>
<!-- 								<th data-field="proBrand">品牌</th> -->
								<th data-field="proName">产品名称</th>
								<th data-field="proPrice">价格</th>
								<th data-field="proState" data-formatter="formatState">上架状态</th>
								<th data-field="proProvince">产地</th>
								<th data-field="proSize">规格说明</th>
								<th data-field="proDescription">简要描述</th>
<!-- 								<th data-field="catName">类别</th> -->
<!-- 								<th data-field="proStyle">风格</th> -->
<!-- 								<th data-field="proModel">型号</th> -->
<!-- 								<th data-field="proMaterial">材质</th> -->
								<th data-field="proId" data-formatter="getProImgs">产品图集</th>
								<th data-field="proId" data-formatter="getImgs">图文详情</th>
								<th data-align="center" data-width="195px" data-field="proId"
									data-formatter="buidOperate">操作</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript"
		src="${path }/resource/js/systools/MJsBase.js"></script>
	<script type="text/javascript">
		var myGrid;
		$(function() {
			var delUrl = "";
			<matrix:btn value="DistributionProduct:del">
			delUrl = "${path}/admin/distributionProduct/del";
			</matrix:btn>
			myGrid = MGrid.initGrid({
				url : "${path}/admin/distributionProduct/showList",
				delUrl : delUrl,
			});
			MTools.autoFullSelect();
			$(".select2").select2();
			initFunctionList();
		});

		function buidOperate(value, row, index) {
			var html = [];
			<matrix:btn value="DistributionProduct:edit">
			var state = row.proState;
			if (state == 1) {
				html[0] = '<a  onClick="changeState('
						+ value
						+ ','
						+ state
						+ ')"  title="下架" class="fa fa-angle-double-down option" style="margin-left:10px;"></a>'
			} else {
				html[0] = '<a  onClick="changeState('
						+ value
						+ ','
						+ state
						+ ')"  title="上架" class="fa fa-angle-double-up option" style="margin-left:10px;"></a>'
			}
			html[1] = '<a  onClick="openEdit('
					+ value
					+ ')"  title="编辑" class="fa fa-edit option" style="margin-left:10px;"></a>'
			</matrix:btn>
			<matrix:btn value="DistributionProduct:del">
			html[2] = '<a onClick="myGrid.delItem('
					+ value
					+ ')" title="删除" class="fa fa-close option text-danger" style="margin-left:10px;"></a>';
			</matrix:btn>
			return html.join("");
		}
		//产品状态
		function formatState(value, row, index) {
			if (value == 1) {
				return "已上架";
			}
			return "未上架";
		}
		//产品图集
		function getProImgs(value, row, index) {
			return '<a  onClick="lookImgs(' + value + ',' + 1
					+ ')"  title="查看" class="fa fa-search option"></a>';
		}
		//图文详情图集
		function getImgs(value, row, index) {
			return '<a  onClick="lookImgs(' + value + ',' + 2
					+ ')"  title="查看" class="fa fa-search option"></a>';
		}
		//打开添加界面
		<matrix:btn value="DistributionProduct:add">
		function openAdd() {
			layer.full(layer.open({
				type : 2,
				title : "添加产品",
				area : [ MUI.SIZE_L, '400px' ],
				maxmin : true,
				content : [ '${path}/admin/distributionProduct/editForm' ]
			}));
		}
		</matrix:btn>

		//打开编辑界面
		<matrix:btn value="DistributionProduct:edit">
		function openEdit(id) {
			layer.full(layer.open({
				type : 2,
				title : "编辑产品",
				area : [ MUI.SIZE_L, '400px' ],
				maxmin : true,
				content : [ '${path}/admin/distributionProduct/editForm?id='
						+ id ]
			}));
		}
		</matrix:btn>
		//打开图集管理
		<matrix:btn value="DistributionProduct:edit">
		function lookImgs(id, type) {
			layer.full(layer.open({
				type : 2,
				title : "编辑图集",
				area : [ MUI.SIZE_L, '400px' ],
				maxmin : true,
				content : [ '${path}/admin/distributionImages/editForm?id='
						+ id + '&type=' + type ]
			}));
		}
		</matrix:btn>
		function changeState(id, proState) {
			var state;
			if (proState == 1) {
				state = 2;
			} else {
				state = 1;
			}
			$.ajax({
				type : "POST",
				url : "${path}/admin/distributionProduct/updateState",
				data : {
					proId : id,
					proState : state
				},
				success : function(data) {
					if (data.status == 'ok') {
						myGrid.serchData();
					}
				}
			});
		}
		/**
		 * 初始产品分类列表
		 */
		function initFunctionList() {
			$
					.AjaxProxy()
					.invoke(
							"${path}/admin/distributionCategory/all",
							function(loj) {
								$("#proType")
										.createSelectTree(
												loj.attr("result").rows,
												{
													id : "catId", // 选项的值
													parent : "catParentId", // 父节点值
													value : "catName", // 要显示的名称
													append : false,
													disabledParent : false, // 父节点是否禁止可选
													defaultHtml : '<option value="" selected="selected">----全部----</option>'
												});
							});
		}
	</script>
</body>
</html>
